<template>
	<div class="">
		<el-descriptions title="收货信息" :column="2">
			<el-descriptions-item label="用户昵称">{{detailData.userName||''}}</el-descriptions-item>
			<el-descriptions-item
				label="用户电话">{{detailData.userAddress?detailData.userAddress.phoneNumber:''}}</el-descriptions-item>
			<el-descriptions-item label="收件姓名">{{detailData.addressName||''}}</el-descriptions-item>
			<el-descriptions-item label="收货地址">
				<div class="row-me row-center">
					{{detailData.addressShow||''}}
					<span class="margin-left10 blue-text" id="copy" @click="copy(detailData.addressShow)">复制</span>
				</div>
			</el-descriptions-item>
		</el-descriptions>
		<el-descriptions title="订单信息" :column="2">
			<el-descriptions-item label="订单ID">
				<div class="row-me row-center">
					{{detailData.orderNo||''}}<span class="margin-left10 blue-text" id="copy"
						@click="copy(detailData.orderNo)">复制</span>
				</div>
			</el-descriptions-item>
			<el-descriptions-item label="订单状态">
				<span v-if="detailData.status==1">待支付</span>
				<span v-else-if="detailData.status==2">待发货</span>
				<span v-else-if="detailData.status==3">已发货</span>
				<span v-else-if="detailData.status==4">已完成</span>
				<span v-else-if="detailData.status==7">已失效</span>
			</el-descriptions-item>
			<el-descriptions-item label="商品总价">{{detailData.totalAmount||''}}</el-descriptions-item>
			<el-descriptions-item label="商品规格">{{detailData.items?detailData.items[0].name:''}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{detailData.createTime||''}}</el-descriptions-item>
			<el-descriptions-item label="支付时间">{{detailData.paymentTime||''}}</el-descriptions-item>
			<el-descriptions-item label="支付方式">
				<span>{{detailData.payType==1?'支付宝':detailData.payType==2?'微信':detailData.payType==3?'兑换码':''}}</span>
			</el-descriptions-item>
			<el-descriptions-item label="优惠券金额">{{Number(detailData.totalAmount-detailData.payAmount)}}</el-descriptions-item>
			<el-descriptions-item label="推荐人信息">{{detailData.promoterName||''}}</el-descriptions-item>
			<el-descriptions-item label="结算佣金">{{detailData.reward||''}}</el-descriptions-item>
			<el-descriptions-item label="订单备注">{{detailData.remark||''}}</el-descriptions-item>
			<el-descriptions-item label="商家备注">{{detailData.merchRemark||''}}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions title="物流信息" :column="2">
			<el-descriptions-item label="快递公司">{{detailData.expressCompany||''}}</el-descriptions-item>
			<el-descriptions-item label="快递单号">
				<div class="row-me">
					{{detailData.expressNo||''}}
					<el-button type="primary" @click="getOrderExpress" class="margin-left10">查看物流</el-button>
				</div>
			</el-descriptions-item>
		</el-descriptions>

		<!-- 物流详情 -->
		<el-dialog title="物流详情" :visible.sync="dialogVisibleExpress" width="60%" append-to-body>
			<el-form ref="orderExpress" :model="orderExpress" label-width="80px">
				<el-form-item label="快递公司"><span>{{orderExpress.expressCompany}}</span></el-form-item>
				<el-form-item label="快递单号"><span>{{orderExpress.expressNo}}</span></el-form-item>
			</el-form>
			<el-table ref="singleTable" :data="orderExpress.list" style="width: 100%" border>
				<el-table-column prop="time" width="200" label="时间点" align="center">
				</el-table-column>
				<el-table-column prop="status" label="事件详情" align="center">
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisibleExpress = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Clipboard from 'clipboard'
	export default {
		props: ['id'],
		data() {
			return {
				detailData: {},
				orderExpress: {},
				dialogVisibleExpress: false
			}
		},
		mounted() {
			if (this.id) {
				this.getData()
			}
		},
		methods: {
			async getOrderExpress() {
				let res = await this.$get('/admin/order/getOrderExpress', {
					id: this.detailData.id
				});
				if (res.code == 1000) {
					this.orderExpress = res.data;
					this.dialogVisibleExpress = true;
				}
			},
			copy(value) {
				const clipboard = new Clipboard('#copy', {
					text: trigger => {
						const str = value
						this.$notify({
							title: '成功',
							message: '已复制到剪切板，可粘贴。',
							type: 'success'
						})
						return str
					}
				})
				clipboard.on('error', e => {
					this.$message.error('代码复制失败')
				})
			},
			async getData() {
				const res = await this.$get('/admin/order/getOrderDetail', {
					id: this.id || '',
					type: 1
				})
				this.detailData = res.data
				if (this.detailData.userAddress) {
					let address = this.detailData.userAddress
					let userAddress = (address.provinceName || '') + (address.cityName || '') + (address.regionName || '') + (
						address.detailAddress || '')
					this.$set(this.detailData, 'addressShow', userAddress)
				}
			},
		}
	}
</script>

<style scoped="scoped">

</style>